<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select and data</title>
</head>
<body>
    <!-- 选择 -->
    <h1>选择</h1>
    <div class="box1">
        <p>yes</p>
        <p>or</p>
        <p>no</p>
    </div>
    <hr />
    <div class="box2">
        <p>yes</p>
        <p>or</p>
        <p>no</p>
    </div>
    <hr />
    <div class="box3">
        <p id="p1">yes</p>
        <p class="me">or</p>
        <p class="me">no</p>
    </div>
    <hr />

    <!-- 插入 -->
    <h1>插入</h1>
    <div class="box4">
        <p class="front">or</p>
    </div>
    <hr />

    <!-- 删除 -->
    <h1>删除</h1>
    <div class="box5">
        <p>yes</p>
        <p class="remove_p">or</p>
        <p>no</p>
    </div>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        /*
        *   1.选择元素
        *       * select(): 选择所有指定元素的第一个
        *       * selectAll(): 选择指定元素的全部
        * */
        // 给select()传入p，如此返回的是第一个元素
        d3.select('.box1').select('p').style('color', 'red');
        // 使用selectAll()选择div.box2中所有的p元素
        d3.select('.box2').selectAll('p').style('color', 'blue');
        // 使用select()选择div.box3中第一个p元素
        d3.select('.box3').selectAll('#p1').style('color', 'yellow');
        // 使用select()选择div.box3中后面的两个p元素
        d3.select('.box3').selectAll('.me').style('color', 'red');
        /*
        * 关于 select 和 selectAll 的参数，其实是符合 CSS 选择器的条件的，即用“井号（#）”表示 id，用“点（.）”表示 class。
        * 此外，对于已经绑定了数据的选择集，还有一种选择元素的方法，那就是灵活运用 function(d, i)。
        * 我们已经知道参数 i 是代表索引号的，于是便可以用条件判定语句来指定执行的元素。
        * */

        /*
        *   2.插入元素
        *       * append(): 在选择集末尾插入元素
        *       * insert(): 在选择集前面插入预元素
        * */
        // append()
        d3.select('.box4').append('p').text('append no');
        // insert()
        d3.select('.box4').insert('p', '.front').text('insert yes');

        /*
        *   3.删除元素
        *       * remove(): 删除指定选择集的元素
        * */
        // remove()
        // 删除整个div.box5
        // d3.select('.box5').remove();
        // 删除div.box5中class为 remove_p的p元素
        d3.select('.box5').select('.remove_p').remove();
        // 上面的语句也可以写成：d3.select('.remove_p').remove();
    </script>
</body>
</html>